﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pageSwitch</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui"/>
<meta name="format-detection" content="email=no" />
<meta name="format-detection" content="address=no" />
<meta name="format-detection" content="telephone=no" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
    <div id="wrap" class="wrapper">
        <div id="pages">
            <div class="page page1">
                <h1>可以用用鼠标或者手指拖动页面，亦可使用鼠标滚轮、键盘方向键等</h1>
                <div class="box">
                    <img src="https://www.baidu.com/img/bd_logo1.png" />
                </div>
            </div>
            <div class="page page2">
                <h1>文本</h1>
                <div class="box">
                    <p>不久前，针对微博用户@Mor-小某的“锤子手机还是不错的！试用后感觉很不错！就是3000多买个它感觉贵了！
                    定价2600的话还能接受！”这句话，罗永浩在微博上表示“明白，我们考虑一下”。但就在大家还没回过神来的时候，
                    锤子科技已经迅速宣布了降价，其中16GB 3G版的售价直接下调到了1980元，32G/64G也分别调整到了2080/2480元。</p>
                    <p>不久前，针对微博用户@Mor-小某的“锤子手机还是不错的！试用后感觉很不错！就是3000多买个它感觉贵了！
                    定价2600的话还能接受！”这句话，罗永浩在微博上表示“明白，我们考虑一下”。但就在大家还没回过神来的时候，
                    锤子科技已经迅速宣布了降价，其中16GB 3G版的售价直接下调到了1980元，32G/64G也分别调整到了2080/2480元。</p>
                </div>
            </div>
            <div class="page page3">
                <h1>链接图片</h1>
                <div class="box">
                    <a href="https://github.com/qiqiboy"><img src="https://www.baidu.com/img/bd_logo1.png" /></a>
                </div>
            </div>
            <div class="page page4">page4</div>
            <div class="page page5">page5</div>
        </div>
        <div id="ctl">
			<select id="tssel">
				<option value="">选择切页效果</option>
				<option value="fade">fade</option>
				<optgroup label="滚动效果">
					<option value="scroll">scroll</option>
					<option value="scroll3d">scroll3d</option>
					<option value="scrollCover">scrollCover</option>
					<option value="scrollCoverReverse">scrollCoverReverse</option>
					<option value="scrollCoverIn">scrollCoverIn</option>
					<option value="scrollCoverOut">scrollCoverOut</option>
					<option value="scrollX">scrollX</option>
					<option value="scroll3dX">scroll3dX</option>
					<option value="scrollCoverX">scrollCoverX</option>
					<option value="scrollCoverReverseX">scrollCoverReverseX</option>
					<option value="scrollCoverInX">scrollCoverInX</option>
					<option value="scrollCoverOutX">scrollCoverOutX</option>
					<option value="scrollY">scrollY</option>
					<option value="scroll3dY">scroll3dY</option>
					<option value="scrollCoverY">scrollCoverY</option>
					<option value="scrollCoverReverseY">scrollCoverReverseY</option>
					<option value="scrollCoverInY">scrollCoverInY</option>
					<option value="scrollCoverOutY">scrollCoverOutY</option>
				</optgroup>
				<optgroup label="滑动效果">
					<option value="slide">slide</option>
					<option value="slideCover">slideCover</option>
					<option value="slideCoverReverse">slideCoverReverse</option>
					<option value="slideCoverIn">slideCoverIn</option>
					<option value="slideCoverOut">slideCoverOut</option>
					<option value="slideX">slideX</option>
					<option value="slideCoverX">slideCoverX</option>
					<option value="slideCoverReverseX">slideCoverReverseX</option>
					<option value="slideCoverInX">slideCoverInX</option>
					<option value="slideCoverOutX">slideCoverOutX</option>
					<option value="slideY">slideY</option>
					<option value="slideCoverY">slideCoverY</option>
					<option value="slideCoverReverseY">slideCoverReverseY</option>
					<option value="slideCoverInY">slideCoverInY</option>
					<option value="slideCoverOutY">slideCoverOutY</option>
				</optgroup>
				<optgroup label="封面效果">
					<option value="flow">flow</option>
					<option value="flowCover">flowCover</option>
					<option value="flowCoverReverse">flowCoverReverse</option>
					<option value="flowCoverIn">flowCoverIn</option>
					<option value="flowCoverOut">flowCoverOut</option>
					<option value="flowX">flowX</option>
					<option value="flowCoverX">flowCoverX</option>
					<option value="flowCoverReverseX">flowCoverReverseX</option>
					<option value="flowCoverInX">flowCoverInX</option>
					<option value="flowCoverOutX">flowCoverOutX</option>
					<option value="flowY">flowY</option>
					<option value="flowCoverY">flowCoverY</option>
					<option value="flowCoverReverseY">flowCoverReverseY</option>
					<option value="flowCoverInY">flowCoverInY</option>
					<option value="flowCoverOutY">flowCoverOutY</option>
				</optgroup>
				<optgroup label="裁切效果">
					<option value="slice">slice</option>
					<option value="sliceX">sliceX</option>
					<option value="sliceY">sliceY</option>
				</optgroup>
				<optgroup label="缩放效果">
					<option value="zoom">zoom</option>
					<option value="zoomCover">zoomCover</option>
					<option value="zoomCoverReverse">zoomCoverReverse</option>
					<option value="zoomCoverIn">zoomCoverIn</option>
					<option value="zoomCoverOut">zoomCoverOut</option>
					<option value="zoomX">zoomX</option>
					<option value="zoomCoverX">zoomCoverX</option>
					<option value="zoomCoverReverseX">zoomCoverReverseX</option>
					<option value="zoomCoverInX">zoomCoverInX</option>
					<option value="zoomCoverOutX">zoomCoverOutX</option>
					<option value="zoomY">zoomY</option>
					<option value="zoomCoverY">zoomCoverY</option>
					<option value="zoomCoverReverseY">zoomCoverReverseY</option>
					<option value="zoomCoverInY">zoomCoverInY</option>
					<option value="zoomCoverOutY">zoomCoverOutY</option>
				</optgroup>
				<optgroup label="扭曲效果">
					<option value="skew">skew</option>
					<option value="skewCover">skewCover</option>
					<option value="skewCoverReverse">skewCoverReverse</option>
					<option value="skewCoverIn">skewCoverIn</option>
					<option value="skewCoverOut">skewCoverOut</option>
					<option value="skew">skewX</option>
					<option value="skewCoverX">skewCoverX</option>
					<option value="skewCoverReverseX">skewCoverReverseX</option>
					<option value="skewCoverInX">skewCoverInX</option>
					<option value="skewCoverOutX">skewCoverOutX</option>
					<option value="skewY">skewY</option>
					<option value="skewCoverY">skewCoverY</option>
					<option value="skewCoverReverseY">skewCoverReverseY</option>
					<option value="skewCoverInY">skewCoverInY</option>
					<option value="skewCoverOutY">skewCoverOutY</option>
				</optgroup>
				<optgroup label="翻转效果">
					<option value="flip">flip</option>
					<option value="flip3d">flip3d</option>
                    <option value="flipClock">flipClock</option>
					<option value="flipPaper">flipPaper</option>
					<option value="flipCover">flipCover</option>
					<option value="flipCoverReverse">flipCoverReverse</option>
					<option value="flipCoverIn">flipCoverIn</option>
					<option value="flipCoverOut">flipCoverOut</option>
					<option value="flipX">flipX</option>
					<option value="flip3dX">flip3dX</option>
                    <option value="flipClockX">flipClockX</option>
					<option value="flipPaperX">flipPaperX</option>
					<option value="flipCoverX">flipCoverX</option>
					<option value="flipCoverReverseX">flipCoverReverseX</option>
					<option value="flipCoverInX">flipCoverInX</option>
					<option value="flipCoverOutX">flipCoverOutX</option>
					<option value="flipY">flipY</option>
					<option value="flip3dY">flip3dY</option>
                    <option value="flipClockY">flipClockY</option>
					<option value="flipPaperY">flipPaperY</option>
					<option value="flipCoverY">flipCoverY</option>
					<option value="flipCoverReverseY">flipCoverReverseY</option>
					<option value="flipCoverInY">flipCoverInY</option>
					<option value="flipCoverOutY">flipCoverOutY</option>
				</optgroup>
				<optgroup label="爆炸效果">
					<option value="bomb">bomb</option>
					<option value="bombCover">bombCover</option>
					<option value="bombCoverReverse">bombCoverReverse</option>
					<option value="bombCoverIn">bombCoverIn</option>
					<option value="bombCoverOut">bombCoverOut</option>
					<option value="bombX">bombX</option>
					<option value="bombCoverX">bombCoverX</option>
					<option value="bombCoverReverseX">bombCoverReverseX</option>
					<option value="bombCoverInX">bombCoverInX</option>
					<option value="bombCoverOutX">bombCoverOutX</option>
					<option value="bombY">bombY</option>
					<option value="bombCoverY">bombCoverY</option>
					<option value="bombCoverReverseY">bombCoverReverseY</option>
					<option value="bombCoverInY">bombCoverInY</option>
					<option value="bombCoverOutY">bombCoverOutY</option>
				</optgroup>
			</select>
            <button style="color:red;" onclick="a.loop=!a.loop;if(a.loop){this.textContent='取消循环'}else{this.textContent='循环'}">循环</button>
			<button onclick="a.prepend(createPage())">前增加一页</button>
			<button onclick="a.append(createPage())">后增加一页</button>
			<button onclick="a.remove(1)">删除第2页</button>
			<button style="color:green;" onclick="a.setEase('bounce')">回弹效果</button>
			<button style="background-color:black;color:white;" onclick="location.href='https://github.com/qiqiboy/pageSwitch'">Github</button>
        </div>
    </div>
	<script type="text/javascript" src="src/pageSwitch.js"></script>
    <script>
    var reg=location.search.match(/ts=([^&]*)/),
		ts=reg&&reg[1]||'flip3d',
		a=new pageSwitch('pages',{
        duration:1000,
        start:0,
        direction:1,
        loop:false,
        ease:'ease',
        transition:ts,
		freeze:false,
		mouse:true,
        mousewheel:true,
        arrowkey:true
    });
	
	document.getElementById('tssel').onchange=function(){
		location.href='?ts='+this.value;
	}
	
	var options=document.getElementById('tssel').options,
		i=0,op;
	while(op=options[i++]){
		if(op.value===ts){
			op.selected=true;
			break;
		}
	}
	
	function colorRand(){
		return parseInt(Math.random()*255);
	}
	
	function createPage(){
		var div=document.createElement('div');
		div.style.backgroundColor='rgb('+colorRand()+','+colorRand()+','+colorRand()+')';
		return div;
	}
    </script>
</body>
</html>
